<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>3.专业知识概述 | 被删的前端游乐场</title>
    <meta name="generator" content="VuePress 1.8.2">
    
    <meta name="description" content="Just playing around">
    
    <link rel="preload" href="/front-end-playground/assets/css/0.styles.6ad2a9ca.css" as="style"><link rel="preload" href="/front-end-playground/assets/js/app.1e2670bf.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/2.38d016d1.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/3.e3f029cb.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/135.f00cd1b6.js" as="script">
    <link rel="stylesheet" href="/front-end-playground/assets/css/0.styles.6ad2a9ca.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/front-end-playground/" class="home-link router-link-active"><!----> <span class="site-name">被删的前端游乐场</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/front-end-playground/" class="nav-link">概述</a></div><div class="nav-item"><a href="/front-end-playground/front-end-basic/" class="nav-link">前端领域</a></div><div class="nav-item"><a href="/front-end-playground/vue/" class="nav-link">Vue学习</a></div><div class="nav-item"><a href="/front-end-playground/wxapp/" class="nav-link">小程序学习</a></div><div class="nav-item"><a href="/front-end-playground/front-end-others/" class="nav-link">百家齐放</a></div><div class="nav-item"><a href="/front-end-playground/front-end-addon/" class="nav-link">前端的进击</a></div><div class="nav-item"><a href="/front-end-playground/front-end-work/" class="nav-link router-link-active">前端与工作</a></div><div class="nav-item"><a href="/front-end-playground/faq.html" class="nav-link">FAQ</a></div> <a href="https://github.com/godbasin/front-end-playground" target="_blank" rel="noopener noreferrer" class="repo-link">
    Github
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/front-end-playground/" class="nav-link">概述</a></div><div class="nav-item"><a href="/front-end-playground/front-end-basic/" class="nav-link">前端领域</a></div><div class="nav-item"><a href="/front-end-playground/vue/" class="nav-link">Vue学习</a></div><div class="nav-item"><a href="/front-end-playground/wxapp/" class="nav-link">小程序学习</a></div><div class="nav-item"><a href="/front-end-playground/front-end-others/" class="nav-link">百家齐放</a></div><div class="nav-item"><a href="/front-end-playground/front-end-addon/" class="nav-link">前端的进击</a></div><div class="nav-item"><a href="/front-end-playground/front-end-work/" class="nav-link router-link-active">前端与工作</a></div><div class="nav-item"><a href="/front-end-playground/faq.html" class="nav-link">FAQ</a></div> <a href="https://github.com/godbasin/front-end-playground" target="_blank" rel="noopener noreferrer" class="repo-link">
    Github
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0" style="padding-top:;"><!----> <p class="sidebar-heading"><span>前端这几年</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0" style="padding-top:10px;"><div class="kitty-main" data-v-2b653b36><span class="stand" data-v-2b653b36></span> <div class="cat" data-v-2b653b36><div class="body" data-v-2b653b36></div> <div class="head" data-v-2b653b36><div class="ear" data-v-2b653b36></div> <div class="ear" data-v-2b653b36></div></div> <div class="face" data-v-2b653b36><div class="nose" data-v-2b653b36></div> <div class="whisker-container" data-v-2b653b36><div class="whisker" data-v-2b653b36></div> <div class="whisker" data-v-2b653b36></div></div> <div class="whisker-container" data-v-2b653b36><div class="whisker" data-v-2b653b36></div> <div class="whisker" data-v-2b653b36></div></div></div> <div class="tail-container" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36></div></div></div></div></div></div></div></div></div></div> <p class="sidebar-heading open"><span>面试这件事</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/front-end-playground/front-end-work/interview/interview-1-ready.html" class="sidebar-link">1.面试准备</a></li><li><a href="/front-end-playground/front-end-work/interview/interview-2-stage.html" class="sidebar-link">2.面试流程</a></li><li><a href="/front-end-playground/front-end-work/interview/interview-3-basic-skills.html" aria-current="page" class="active sidebar-link">3.专业知识概述</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-work/interview/interview-3-basic-skills.html#专业知识" class="sidebar-link">专业知识</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-work/interview/interview-3-basic-skills.html#结束语" class="sidebar-link">结束语</a></li></ul></li><li><a href="/front-end-playground/front-end-work/interview/interview-4-project-skills.html" class="sidebar-link">4.项目经验概述</a></li><li><a href="/front-end-playground/front-end-work/interview/interview-5-other-skills.html" class="sidebar-link">5.其他内容概述</a></li><li><a href="/front-end-playground/front-end-work/interview/interview-6-javascript.html" class="sidebar-link">6.Javascript相关</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><p>这些年也有不少的面试别人和面试自己的经历，也有好些人来咨询一些前端的面试题目和准备，所以整理一下记录下来。本文概括地描述一下，面试中可能会遇到的一些基础专业知识。
</p> <p>在进行面试前复习的时候，我们需要有结构、有逻辑地进行知识的梳理，那么大概有哪些知识点需要准备呢？面试官又可能会问到哪些内容呢？</p> <h2 id="专业知识"><a href="#专业知识" class="header-anchor">#</a> 专业知识</h2> <p>这里会针对前端小伙伴来进行相关专业知识的准备说明，本文只做范围的概述，后面再有详细的文章来一个个讲解。</p> <h3 id="javascript"><a href="#javascript" class="header-anchor">#</a> Javascript</h3> <p>前端最基础的技能包括 Javascript、CSS 和 HTML，新手比较容易遇到这方面的考察。对于Javascript会问到多一些，通常包括：</p> <table><thead><tr><th>考察范围</th> <th>具体问题</th></tr></thead> <tbody><tr><td>对单线程 Javascript 的理解</td> <td>单线程来源<br>Web Workers 和 Service Workers 的理解</td></tr> <tr><td>异步事件机制</td> <td>为什么使用异步事件机制<br>在实际使用中异步事件可能会导致什么问题<br>关于 setTimeout、setInterval 的时间精确性</td></tr> <tr><td>对 EventLoop 的理解</td> <td>介绍浏览器的 EventLoop<br>macrotask 和 microtask 的区别<br>setTimeout 和 Promise 在不同浏览器的执行顺序</td></tr> <tr><td>Javascript 的原型和继承</td> <td>如何理解 Javascript 中的“一切皆对象”<br>如何创建一个对象<br>proto 与 prototype 的区别</td></tr> <tr><td>作用域与闭包</td> <td>请描述以下代码的执行输出内容（考察作用域）<br>什么场景需要使用闭包<br>闭包的缺陷</td></tr> <tr><td>this</td> <td>简单描述 this 在不同场景下的指向<br>apply 和 call 的使用<br>箭头函数与普通函数的区别</td></tr> <tr><td>ES6+</td> <td>对 Promise 的理解<br>使用 async、await 的好处<br>浏览器兼容性与 Babel<br>Set 和 Map 数据结构</td></tr></tbody></table> <p>对 Javascript 的考察，也可以通过写代码的方式来进行，例如：</p> <ul><li>手写代码实现 call/apply/bind</li> <li>手写代码实现 Promise、async/await</li> <li>Javascript 中 0.1+0.2 为什么等于 0.30000000000000004，如何通过代码解决这个问题</li></ul> <h3 id="html与css"><a href="#html与css" class="header-anchor">#</a> HTML与CSS</h3> <p>关于 HTML 的内容会较少单独地问，更多是结合浏览器的渲染机制等一起考察。关于 CSS，也有以下的一些考察点：</p> <ul><li>介绍盒子模型</li> <li>内联元素与块状元素、display</li> <li>文档流的理解：static/relative/absolute/fixed等</li> <li>元素堆叠：z-index 与 position 的作用关系</li> <li>Flex 布局方式的理解和使用</li> <li>BFC 的优点和缺点</li> <li>CSS 动画考察：关键帧、animate、transition 等</li></ul> <h3 id="网络相关"><a href="#网络相关" class="header-anchor">#</a> 网络相关</h3> <p>网络相关的知识在日常开发中也是挺常用的，相关的问题可以从“一个完整的HTTP请求过程”来讲述，包括：</p> <ul><li>域名解析（此处涉及 DNS 的寻址过程）</li> <li>TCP 的 3 次握手</li> <li>建立 TCP 连接后发起 HTTP 请求</li> <li>服务器响应 HTTP 请求</li></ul> <p>以上的内容都需要尽数掌握，除此以外，关于 HTTP 的还有以下常见内容：</p> <ul><li>HTTP 消息的结构，包括 Request请求、Response响应</li> <li>HTTP 请求方法，使用 PUT、DELETE 等方法时为什么有时候在浏览器会看到两次请求（涉及 CROS 中的简单请求和复杂请求）</li> <li>常见的 HTTP 状态码</li> <li>浏览器是如何控制缓存的：相应的头信息、状态码</li> <li>如何对请求进行抓包和改造</li> <li>Websocket 与 HTTP 请求的区别</li> <li>HTTPS、HTTP2 与 HTTP 的对比</li></ul> <h3 id="浏览器相关"><a href="#浏览器相关" class="header-anchor">#</a> 浏览器相关</h3> <p>关于浏览器，有很多的机制需要掌握。通常来说，面试官会从一个叫“在浏览器里面输入url，按下 enter 键，会发生什么？”中进行考察，首先会经过上面提到的 HTTP 请求过程，然后还会涉及以下内容：</p> <table><thead><tr><th>考察内容</th> <th>相关问题</th></tr></thead> <tbody><tr><td>浏览器的同源策略</td> <td>“同源”指什么<br>那些行为受到同源策略的限制<br>常见的跨域方案有哪些</td></tr> <tr><td>浏览器的缓存相关</td> <td>Web 缓存通常包括哪些<br>浏览器什么情况下会使用本地缓存<br>强缓存和协商缓存的区别<br>强制 ctrl + F5 刷新会发生什么<br>session、cookie 以及 storage 的区别</td></tr> <tr><td>浏览器加载顺序</td> <td>为什么我们通常将 javascript 放在 <code>&lt;body&gt;</code> 的最后面<br>为什么我们将 CSS 放在 <code>&lt;head&gt;</code> 里</td></tr> <tr><td>浏览器的渲染原理</td> <td>HTML/CSS/JS 的解析过程<br>Render Tree 是怎样生成的<br>Repaint 和 Reflow 是怎样的过程<br>日常开发中要注意哪些渲染性能问题<br></td></tr> <tr><td>虚拟 DOM 机制</td> <td>为什么要使用虚拟 DOM<br>为什么要使用 JS 对象来描述 DOM 结构<br>简单描述下虚拟 DOM 的实现原理</td></tr> <tr><td>浏览器事件</td> <td>DOM 事件流包括几个阶段（点击后会发生什么）<br>事件委托是什么</td></tr></tbody></table> <h3 id="安全相关"><a href="#安全相关" class="header-anchor">#</a> 安全相关</h3> <p>安全在实际开发中是最重要的，作为前端开发，同样需要掌握：</p> <ul><li>前端安全中，需要注意的有哪些问题</li> <li>XSS/CSRF 是怎样的攻击过程，要怎么防范</li> <li>除了 XSS 和 CSRF，你还了解哪些网络安全相关的问题呢</li> <li>SQL 注入、命令行注入是怎样进行的</li> <li>DDoS 攻击是什么</li> <li>流量劫持包括哪些内容</li></ul> <h3 id="算法基础"><a href="#算法基础" class="header-anchor">#</a> 算法基础</h3> <p>很多大公司会考察算法基础，大家其实也可以多上 leetcode 去刷题，这些题目刷多了就有感觉了。前端比较爱考的包括：</p> <ul><li>各种排序算法、稳定排序与原地排序、JS 中的 sort 使用的是什么排序</li> <li>查找算法（顺序、二分查找）</li> <li>递归、分治的理解和应用</li> <li>动态规划</li></ul> <p>除此之外，常见的数据结构也需要掌握：</p> <ul><li>链表与数组</li> <li>栈与队列</li> <li>二叉树、平衡树、红黑树等</li></ul> <h3 id="计算机通用知识"><a href="#计算机通用知识" class="header-anchor">#</a> 计算机通用知识</h3> <p>虽然在日常工作中我们接触到的内容比较局限于前端开发，但以下内容如果能掌握，对个人成长和面试过程也会有所帮助：</p> <ul><li>理解计算机资源，认识进程与线程（单线程、单进程、多线程、多进程）</li> <li>了解阻塞与非阻塞、同步与异步任务等</li> <li>进程间通信（IPC）常包括哪些方式，进程间同步机制又包括哪些方式</li> <li>Socket与网络进程通信是怎样的关系、Socket连接过程是怎样的</li> <li>简单了解数据库（事务、索引）</li> <li>常见的设计模式有哪些、列举实际使用过的一些设计模式</li> <li>如何理解面向对象编程、对函数式编程的看法</li></ul> <h2 id="结束语"><a href="#结束语" class="header-anchor">#</a> 结束语</h2> <p>基础知识相关的内容真的不少呢，但是这块其实只要准备足够充分就可以掌握。参加过高考的我们，理解和记忆这么些内容，其实没有想象中那么难的。</p></div> <!----> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/godbasin/front-end-playground/edit/sourcecode/docs/front-end-work/interview/interview-3-basic-skills.md" target="_blank" rel="noopener noreferrer">帮阿猪改善此页面！</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----> <blockquote>部分文章中使用了一些网站的截图，如果涉及侵权，请告诉我删一下谢谢~</blockquote> <div style="margin-top:30px;"><div class="el-row" style="margin-left:-10px;margin-right:-10px;"><div class="el-col el-col-24 el-col-sm-0 el-col-md-2 el-col-lg-4" style="padding-left:10px;padding-right:10px;display:block;"><div style="width:1px;height:1px;"></div></div> <div class="el-col el-col-24 el-col-sm-24 el-col-md-18 el-col-lg-16" style="padding-left:10px;padding-right:10px;"><div class="el-card box-card is-always-shadow"><div class="el-card__header"><div class="clearfix"><span>温馨提示喵</span></div></div><div class="el-card__body"> <div class="el-row" style="margin-left:-10px;margin-right:-10px;"><div class="el-col el-col-24 el-col-xs-24 el-col-sm-12" style="padding-left:10px;padding-right:10px;"><div class="el-image"><div class="image-slot"><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/assets/img/loading.gif" style="width:100%;"></div><!----></div></div> <div class="el-col el-col-24 el-col-xs-24 el-col-sm-12" style="padding-left:10px;padding-right:10px;"><div class="copyright-text"><div>本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。</div> <div>出处：被删的前端游乐场</div> <div>作者：<a href="https://github.com/godbasin" target="_blank">被删</a></div></div></div></div></div></div></div></div></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/front-end-playground/front-end-work/interview/interview-2-stage.html" class="prev">
          2.面试流程
        </a></span> <span class="next"><a href="/front-end-playground/front-end-work/interview/interview-4-project-skills.html">
          4.项目经验概述
        </a>
        →
      </span></p></div>  <div class="gitalk-container theme-default-content"><div id="gitalk-container" class="content"></div></div></main> <div id="kitty-container"><span><div role="tooltip" id="el-popover-1445" aria-hidden="true" class="el-popover el-popper" style="width:undefinedpx;display:none;"><!----><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/2code2.jpg" class="image"> <div class="text">牡羊猪的猫粮罐</div> </div><span class="el-popover__reference-wrapper"><div id="kitty" style="background:url(https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/assets/img/kitty1.svg);"></div></span></span> <div class="el-dialog__wrapper" style="display:none;"><div role="dialog" aria-modal="true" aria-label="牡羊猪是这样渐渐胖成猪的喵（点击图片可以切换噢）" class="el-dialog" style="margin-top:15vh;"><div class="el-dialog__header"><span class="el-dialog__title">牡羊猪是这样渐渐胖成猪的喵（点击图片可以切换噢）</span><button type="button" aria-label="Close" class="el-dialog__headerbtn"><i class="el-dialog__close el-icon el-icon-close"></i></button></div><!----><!----></div></div></div></div><div class="global-ui"></div></div>
    <script src="/front-end-playground/assets/js/app.1e2670bf.js" defer></script><script src="/front-end-playground/assets/js/2.38d016d1.js" defer></script><script src="/front-end-playground/assets/js/3.e3f029cb.js" defer></script><script src="/front-end-playground/assets/js/135.f00cd1b6.js" defer></script>
  </body>
</html>
